<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <script src="dragStatic/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <script src="dragStatic/js/common.js"></script>
    <script src="preview/js/radialIndicator.js"></script>
    <script src="preview/js/jquery.zySlide.js"></script>
    <title>大数据单模块-今日推荐</title>
    <style>
        .history-content{
            position: relative;
            width: 100%;
            height:78%;
            background: url(preview/img/notice_text.png);
            background-size: 100% 100%;
            padding: .2rem .22rem .45rem;
            /*background-image: linear-gradient(0deg, rgba(13, 26, 57, 0.7) 0%, rgba(27, 47, 91, 0.7) 36%, rgba(41, 67, 125, 0.7) 84%);*/
            /*box-shadow: 0rem 0.03rem 0.07rem 0rem rgba(0, 0, 0, 0.38);*/
            /*border: solid 0.01rem rgba(72, 77, 91, 0.28);*/
        }
        /*由于通知标题的背景图片上下左右尺寸不对应所以设置的样式都不对称*/
        .history_title{
            position: absolute;
            width: 2.99rem;
            height: 0.56rem;
            line-height: 0.5rem;
            text-align: center;
            background: url(preview/img/notice_title.png);
            background-size: 100% 100%;
            top:-0.3rem;
            left:52%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
            padding:0 0.16rem 0 0.22rem;
        }
        /*设置文字外面的盒子制造出四面间距的效果*/
        .history_text{width: 100%;height: 95%;position: relative;overflow: hidden;}
        .history_time{margin-bottom:0.12rem;text-align: center;}
        .history_inner{position: absolute;}
        /*1366下面*/
        @media screen and (max-width:190px) {
            .history_time {
                position: absolute;width: 100%;text-align: center;left:0;top:0.22rem;
                overflow: hidden;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                white-space: nowrap;
            }
            .history-content{
                padding: 0.75rem .22rem 0.4rem;
            }
        }


    </style>
</head>
<body>
<div class="history">
    <div class="module-title ycenterbox"><img src="preview/img/listimg.png" /><span class="section_name" data-key="today_recom_str">历史上的今天</span></div>
    <div class="history-content">
        <div class="history_title words1">罗马帝国皇帝尼禄出生</div>
        <div class="history_time">0037年12月15日 (丁酉年冬月十九)</div>
        <div class="history_text">
            <div class="history_inner"></div>
        </div>
    </div>
    <div class="block"></div>
</div>
</body>
<script>
    window.onresize = function(){
        page_init(100,422,"历史上的今天");
    };
    window.onload = function(){
        page_init(100,422,"历史上的今天");
        var gobalAddr="whfw.superlib.com:9025";
        history_ajax();
        //历史的今天
        var history_time=null,hp_height,h_height;
        function history_style(){
            $('.history_inner p').removeAttr('style');
            $('.history_inner font').removeAttr('color');
            $('.history_inner a').removeAttr('href');
            $('.history_inner a').removeAttr('target');
            $('.history_inner font').removeAttr('style');
            $('.history_inner span').removeAttr('style');
            $('.history_inner i').removeAttr('style');
            $('.history_inner em').removeAttr('style');
            $('.history_inner a').removeAttr('style');
            $('.history_inner h1').removeAttr('style');
            $('.history_inner h2').removeAttr('style');
            $('.history_inner h3').removeAttr('style');
            $('.history_inner h4').removeAttr('style');
            $('.history_inner h5').removeAttr('style');
            $('.history_inner h6').removeAttr('style');
            $('.history_inner span').css({fontSize:0.94+"em"});
            $('.history_inner i').css({fontSize:0.94+"em"});
            $('.history_inner em').css({fontSize:0.94+"em"});
            $('.history_inner h1').css({fontSize:0.94+"em",fontWeight:"normal"});
            $('.history_inner h2').css({fontSize:0.94+"em",fontWeight:"normal"});
            $('.history_inner h3').css({fontSize:0.94+"em",fontWeight:"normal"});
            $('.history_inner h4').css({fontSize:0.94+"em",fontWeight:"normal"});
            $('.history_inner h5').css({fontSize:0.94+"em",fontWeight:"normal"});
            $('.history_inner h6').css({fontSize:0.94+"em",fontWeight:"normal"});
            $('.history_inner img').css({float:'left',width:'33%',margin:'0.2rem'});

        }
        var history_stepNum = 0.2;
        function history_move(){
            cancelAnimationFrame(history_move);
            $('.history_inner').css({
                "transform" : "translate3d(0,-"+history_stepNum+"px,0)"
            })
            history_stepNum += 0.2;
            if(history_stepNum >= h_height){
                history_stepNum = 0.2;
            }
            requestAnimationFrame(history_move);
        }
        function history_ajax(){
            $.ajax({
                type: "get",
                url: "https://"+gobalAddr+"/cxts/todayOnHistory/lookUp",
                dataType: "json",
                data: {},
                success: function (json) {
                    var str='<div>'+json.result[0].content+'</div>';
                    $(".history_inner").html(str);////内容
                    $('.history_title').html(json.result[0].title);//标题
                    var all_date="时间："+json.result[0].date+"("+json.result[0].lunar+")";
                    $('.history_time').html(all_date);///日期
                    history_style();///清除样式
                    setTimeout(function(){
                        h_height=$('.history_inner').height();
                        hp_height=$('.history_text').height();
                        if(h_height>hp_height){
                            requestAnimationFrame(history_move);
                            divFlex("history");
                        }
                    },2000)
                }
            });
        }
    }
</script>
</html>